<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/v2.6.10/vue.js"></script>
		<style>
		    ul {
		      margin: 0;
		      padding: 0;
		    }
		
		    li {
		      list-style-type: none;
		      display: inline-block;
		      margin-right: 10px;
		      padding: 20px;
		      background-color: wheat;
		    }
		
		    .red {
		      background-color: red;
		      color: wheat;
		    }
		  </style>
	</head>
	<body>
		<div id="app">
			<ul>
			    <li v-for="item,index in list" :class="index == select ? 'red' : ''" @click="select=index;imgUrl=item.imgUrl">
			        {{item.name}}
				</li>
			</ul>
			
		    <img width="35%" height="35%" :src="imgUrl" alt="">
		</div>
		<script>
			var i = new Vue({
				el: "#app",
				data: {
				        list: [
				          {
				            name: "one",
				            imgUrl: "img/03.jpg"
				          },
				          {
				            name: "two",
				            imgUrl: "img/04.jpg"
				          },
				        ],
				        imgUrl: "img/05.jpg",
				        select: 0
				      },
				
				      methods: {
				
				      }
			})

		</script>
	</body>
</html>
